<template>
  <div>
    <!--轮播图展示-->
    <div>
      <el-carousel height="400px" :interval="3000" arrow="always">
        <el-carousel-item v-for="(image, index) in images" :key="index">
          <img :src="image" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- <div class="middle">
            <div class="left">
                <header>
                    <h1 v-if="user">{{ welcomeMessage }}</h1>
                    <h1 v-else>欢迎使用智慧医疗系统，以下是为你推荐的一些功能，请登录以继续使用！</h1>
                </header>
                <div class="content">
                    <div></div>
                </div>
            </div>
            <div class="right"></div>
        </div> -->
  </div>
</template>

<script setup lang="ts">
// //引入/home/carousel中的轮播图组件
import { reactive } from 'vue';

// 使用 import 引入图片
import image1 from '@/assets/images/北京协和医院.png';
import image2 from '@/assets/images/北京大学第三医院.png';
import image3 from '@/assets/images/北京大学第一医院.png';
import image4 from '@/assets/images/四川大学华西.png';

const images = reactive([image1, image2, image3, image4]);
// import { computed, watch } from 'vue';
// import { useStore } from 'vuex';

// const store = useStore();

// // 计算属性：生成欢迎语
// const user = computed(() => store.state.user);
// const welcomeMessage = computed(() => {
//     if (user.value && user.value.nickname) {
//         return `你好，${user.value.nickname}！`;
//     }
//     return '';
// });

// // 监听用户信息变化
// watch(user, () => {
//     console.log('用户信息已更新');
// });
</script>

<style scoped lang="scss">
img {
    width: 100%;
    height: 100%;
    object-fit: cover; // 确保图片填充整个容器
}
</style>
